<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="app">
        <v-img :src="src" ></v-img>
    </div>
</body>
<script src="../../js/vue.js"></script>
<script>
    Vue.config.productionTip=false;
    new Vue({
        el:"#app",
        data:{
            src:"./img/xlaop.png"
        },
        components:{
            "v-img":{
               //如果props是一个数组 只能简单接收父组件传递来的数据
               // props:["src"],
               //如果props是一个对象 可以接收父组件传递来的数据 并 检验
               props:{
                   // src:String
                   // src:[String,Boolean]
                   src:{
                       type:[String,Boolean],
                       //required:true,
                       default:"./img/laop.jpg",
                       //自定义验证
                       validator(value){
                            //value 父组件传递过来的src的值
                           const hz = value.split(".").pop()
                           return hz === "jpg"
                       }
                   }
               },
               template:`<img :src="src" width="600" />`
             }
        }
    })
</script>
</html>